<template>
  <div class="abs trbl0 f ac xc" style="background-color: rgba(0,0,0,.3);">
    <svg width="440" height="440" viewBox="0 0 440 440">
      <defs>
        <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient">
          <stop offset="0%" stop-color="#e52c5c"></stop>
          <stop offset="100%" stop-color="#ab5aea"></stop>
        </linearGradient>
      </defs>
      <circle cx="220" cy="220" r="170" class="circle-track"></circle>
      <circle cx="220" cy="220" r="170"  stroke-linecap="round" transform="rotate(-90 220 220)" class="circle-bar" :style="{strokeDashoffset: `${offsetVal}px`}"></circle>
      <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">{{percent}}%</text>
    </svg>
  </div>
</template>
<script>
import f from "./index.js"
export default {
  components: {},
  props: {},
  emits: [],
  setup(props, { emit }) {
    return f(props, emit)
  }
}
</script>
<style src="./index.css" scoped></style>